Parece que últimamente todos nos pusimos de acuerdo en preguntar de qué forma se consigue el efecto deslizante en los gadgets de la sidebar, en concreto el de Directorios. Así que vamos a explicarlo y los interesados ya pueden ponerse manos a la obra.
El efecto deslizante se consigue con las API de Google. El API de bibliotecas AJAX carga las bibliotecas JavaScript de software libre más populares entre ellas Prototype y Scriptaculous, eso nos evita buscar alojamientos externos y su funcionamiento es mucho más rápido.
Vamos a necesitar Prototype y Acriptaculous y las añadiríamos justo antes de </head> lo siguiente:

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("prototype", "1.6.1.0");
google.load("scriptaculous", "1.8.3");
</script>

Con anterioridad lo añadimos en los siguientes ejemplos (si ya lo tuviéramos no es necesario volver a añadirlo)

Ir a inicio con efecto deslizante
"Imagen multiusos"
Subir y bajar con efecto deslizante
Efecto deslizante en los archivos de la sidebar

Para crear el efecto deslizante en los directorios o cualquier otro gadget lo que haremos será añadir un título al gadget para localizarlo con más facilidad.
En plantilla de Edición de HTML los gadgets se muestran como widgets más o menos así:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Directorios' type='HTML'/>
<b:widget otro gadget/>
<b:widget otro gadget/>
<b:widget otro gadget/>
</b:section>
</div>

Si marcamos para expandir la plantilla veremos que a cada widget le preceden unas líneas, en ellas veremos la etiqueta <data:title/> es la que genera el título del gadget.
Añadiremos Effect.toggle de Scriptaculous que nos permite mostrar y ocultar con distintos efectos cualquier contenido.
En nuestro código añadiremos lo marcado en negrita:

<b:widget id='HTML1' locked='false' title='Directorios' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle(&quot;Directorios&quot;,&quot; appear &quot;); return false'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'>[+/-]<data:title/></h2>
</b:if>
</a><div align='center' id='Directorios' style='display: none;'>
<div class='widget-content'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Debemos tener en cuenta que cada id debe ser único, si ya tenemos un id llamado Directorios no podemos crear otro con el mismo nombre.
El título, hace las veces de enlace, no hay problema si no deseamos añadir [+/-]porque seguirá funcionando. Si preferimos sustituirlo por una imagen es conveniente sea tipo icono para que el tamaño no se vea desproporcionado.
<img src="url-imagen"/>
También podemos situarlo a la derecha del título, es decir a la derecha de <data:title/>

Rosa explicó en su momento la forma de añadir el efecto slide en cualquier gadget incluidas las etiquetas.
Visitando a J.Miur podemos ver en sus ejemplos los distintos efectos que podemos añadir appear, slide o blind .
appear es el que viene definido en los pasos que seguimos anteriormente si deseamos cualquier otro simplemente debemos sustituir el nombre del efecto que en el código está marcado con fondo azul, como ejemplo sería algo así:
DEMO con appear




Filigrana

Hola Gema tanto tiempo! Que lindo efecto, ya probaré agregarlo!
Besos!

Responder
EM2.0

Gema si Prototype y Acriptaculous lo has añadido ya para otra cosa, ¿hay que volver a añadirlos?

Responder
Gem@

yz Hola Filigrana ¡mucho tiempo! ¿cómo van esos diseños? :)

yz No, Dña. Urraca co una vez es suficiente :)

Responder
ElMundodeLaria

Hola Gema, de nuevo por aqui para que me eches un cablecillo XD(aunque no es sobre este tema)
El problema es que no consigo que la imagen del footer quede por encima, se queda por detrás (si ves el blog lo entenderas mejor)seguramente sea sencillo, pero no doy con la solución, me he quedado atascada en eso jeje.

Bueno, gracias de antemano guapa.

Un abrazo.

Responder
Gem@

yz ElMundodeLaria lo primero de todo deberías añadir algún post de prueba para ver el efecto que produce una vez hay contenido.
Pienso que el problema está que añadiste en main una medida establecida para la transparencia cuando tiende a ir tomando más altura conforme vamos actualizando el blog.
En la sidebar es otra cosa porque una vez tenemos la sidebar "llena" no la cambiamos con frecuencia.
Si ese valor:
margin-bottom: -32768px;
padding-bottom: 32768px;
lo eliminas provisionalmente e incluyes alguna entrada podemos ver como queda la imagen del footer en realidad ;)

Responder
Eulalia

No consigo que me salga este efecto. Solo consigo volver arriba pero el gadget no se abre.
He probado a quitarle el # a ver si así, pero tampoco. Lo probé primero en Tuneando, pero como allí tengo varios trucos aplicados y en el blog de Rosa vi que alguien decía que era incompatible con algun otro script lo borré. Pero hoy lo he probado en el directorio de Tutoriales, donde no hay absolutamente ningun otro script en el código y tampoco me funciona.
¿A que puede ser debido?
Gracias guapa.

Responder
Gem@

yz Eulalia, estuve mirando el blog pero sé donde lo añadiste si me indicas lo miro ;)

Responder
Eulalia

Hola, lo quité porqué no lograba que se abriera el gadget.
Todo lo que hay en ese blog son gadgets LinkList, hay mas de 20, y estaba en el LinkList1 la de los consejos para el ordenador.
Lo volveré a poner, así ves tu misma qué pasa.
Por cierto, en mis blogs suelo trabajar con explorer y no pensé en mirar si con firefox funcionaba.
Un abrazo.

Responder
Eulalia

Ya está. colocado y sigue sin abrirse en Explorer ni en Firefox. El gadget se titula Para tu ordenador (Windows XP) He copiado el código tal cual lo das en esta entrada, he añadido los scripts de las librerias, y nada, me lleva arriba.
Un abrazo.

Responder
Gem@

yz Voy a verlo Eulalia y ya de paso te contesto a mail :)

Responder
Unknown

no sale :( seguiré buscando qué anda mal. qué desastre!

Responder
Gem@

yz lk pero en tu blog no lo hiciste siguiendo estos pasos, intenta seguir los mismos de la otra vez.

Responder
Unknown

no, lo voy a hacer es pasar la plantilla íntegra al blog de pruebas y luego hacerlo en un blog en el que aun no lo he hecho y comparar los resultados. es la única manera. creo!

Responder
Unknown

no, gem@, acabo de hacer los pasos uno por uno en soupcouture y cuando clico en DIRCETORIOS, me voy para arriba, no se despliega. no sé si es porque no está en la sidebar... está abajo de todo del blog. en fin. no sé.

Responder
Gem@

yz Prueba a añadir el último </div> antes de </b:includable>

Responder
Unknown

Hola gem@, andon co un problemón... jaja, estoy intentando agregar a este efecto en mi blog, resulta que cambié de opinión. Te había comentado que queria agregar el efecto slide en imágenes para banners, ahora resulta que se me presentó otra urgencia :D quiero agregarlo en unas etiquetas que al presionar el título se desplacen hacia abajo... hace mucho leí que se puede hacer ese efecto pero no recuerdo bien donde... :$
Ahora bien, el problema se me presenta cuando coloco el código de los scripts sobre /head. cuando lo hago se me borran algunos widgets como por ejemplo el de los seguidores...
quisiera preguntarte sobre este tema y que si puedes pases por mi blog. es la etiqueta "Artistas" las que quiero poner en desplegable, y por supuesto, que se mantengan mis pocos seguidores a la vista. ;)

Responder
Anónimo

hola como va? yo sigo con la plantilla, tengo una duda y no si este efecto me va a servir pongamos que quiero poner todos los blogs que leo mi blogroll pongamos 45 pero solo quiero que se vean 20 y el resto que se vean si se aprieta algo como mostrar mas o algo asi con este sistema que has explicado lo hace o es de otra forma porque voy loca buscando y no encuentro la solución y solo quiero poner letras porque no puedo recargar la plantilla con muchas cosas porque al final me voy a quedar como la que tengo ahora pero mas grande y lo del fotter como te conte un saludo espero que estes bien.

Responder
Anónimo

No digas nada je je no me sirve porque el scriptaculous ese o como se llame hace que no se me vean algunos gadgets que porque? a saber :D soy yo y mis mundos ya le puse buen nombre al blog ya je je un saludo

Responder
Gem@

yz Alexnex que dejen de visualizarse algunos gadgets puede ser porque usas otra librería, jQuery o similar y crea conflictos una con otra.
Hace unos días vi una entrada de Iván donde explica como utilizar librerías distintas puedes verla
Si por el contrario no usas otra librería intenta añadir el script antes de </body> para ver si ocurre lo mismo.
Si no entiendo mal deseas añadir el efecto en el título de las etiquetas de forma que se puedan mostrar y ocultar presionando el título "Artistas"
En esta misma entrada al final dejo enlace al blog de Rosa donde explica como añadir el efecto slide a las etiquetas ;)

yz Nafire quizás tu caso sea como le comento a Alexnex y estás utilizando otra librería,te digo lo mismo sobre ese tema intenta añadir el script antes de </body> (está al final) quizás la entrada de Iván te sea de ayuda para utilizar dos librerías distintas.
No te culpes, seguro que la culpa la tiene Blogger :)

Responder
Anónimo

Gracias gema me lo miraré en ponerlo antes de body porque no uso ninguna otra libreria es de la plantilla que por fin termine y si la miras no tiene mucha complicación y esto ya me pasaba solo con lo justo que le puse en el de pruebas por cierto sigue desapareciendo tu banner cuando quiere je je si tienes un poltergeist donde lo tienes alojado no es culpa mía je je un saludo y gracias.

Responder
Unknown

Gracias Gem@... soy un descuidado, no leí lo de la entrada al blog de Rosa, disculpa... :$

Responder
Gem@

yz ¿Descuidado por eso? ahhh entonces yo también soy una descuidada :)

Responder
Gem@

yz Veamos si así funciona Nafire, lo de mi banner se está convirtiendo en un tema raro, raro, raro... nadie más me comenta ese problema :O

Responder
Unknown

hola gem"! pregunta 1000 quinientas... ¿hay alguna manera de BAJAR la sidebar? concretamente me gustaría bajarla en http://wanttobuymywork.blogspot.com......

Responder
Gem@

:: Para bajar la sidebar rueba en sidebar-wrapper margin:35px 0;

Responder
Unknown

no, no funciona...

Responder
Gem@

:: Déjalo añadido que lo vea online lk ;)

Responder
Unknown

ya está, ya puedes verlo...

Responder
Unknown

hola gem@, esto es lo que estaba buscando...

Responder
Unknown

hola gem@. en http://soupcouture.blogspot.com, esto no me funciona de ninguna manera, ¡qué deseperación! lo conseguí en otro blog pero en este no...

Responder
Gem@

:: Pero lo que quieres es que baje la sidebar ¿o ocultarla y que se muestre con este efecto de la entrada?

Responder
Unknown

no, estamos habalndo e cosas distintas. lo de bajar la sidebar es en http://wanttobuymywork.blogspot.com. Lo del directorio es en http://soupcouture.blogspot.com. NO hay manera de hacer que se despliegue el directorio... (tampoco logré bajar la sidebar en el otro blog, pero lo más preocupante es lo de scriptaculous y el directorio). porque aunque saco todos los cripts, ni siquiera aparecen los banners. algo anda mal y no encuentro la forma.... aysss

Responder
Unknown

ya, gem@, lo conseguí. no se hable más de DIRECTORIOS!!! :P

Responder
Gem@

:: Estupendo si ya está solucionado.
Sobre bajar la sidebar en http://wanttobuymywork.blogspot.com no veo el margen añadido en sidebar-wrapper y si no lo veo difícilmente puedo saber por qué no funciona :S

Responder
Unknown

qué raro, y sin embargo lo puse... ¿? voy a echar un vistazo a ver qué pasa. puede ser que se borre? o que no lo jaya guardado...

Responder
Unknown

mira ahora...

Responder
Gem@

:: ¿Hablamos de http://wanttobuymywork.blogspot.com ? porque sigo sin ver en sidebar-wrapper.
Añade en #sidebar-wrapper justo después margin:35px 0; si no guardas los cambios no puedo verlo lk.

Responder
Unknown

está hecho gem@, pero no funciona, creo.

Responder
Gem@

:: En lugar de margin:35px 0; añade margin-top:50px y el valor 50 lo vas variando hasta ver la altura que deseas.

Responder
Unknown

ahora SII!! zenkiu gem@!!

Responder
Gem@

:: Genial :)

Responder
Unknown

hola gem@: vuelvo al tema porque quiero poner el efecto en el directorio de http://libroscolgados.blogspot.com. Y vuelve a pasar lo mismo, que se me va arriba cuando clico. ¿Cuál es el código que debo eliminar incompatible con éste? (o lo que sea que deba hacer para que funcione...) gracias mil, gem@.

Responder
Gem@

:: Lara no sé a que código te refieres que debes eliminar, he leído los comentarios anteriores y parece ser que lo solucionaste sin eliminar nada :S Si te refieres a lo que dicen otros comentarios ellos hablan de incompatible entre librerías.

Responder
Unknown

hola gem@, sí, lo resolví dos veces, pero esta vez no me funciona. y sí, me refería a incompatibilidad de librerías... pero no sé a qué se refiere...

Responder
Gem@

:: Las explicaciones y la forma de añadirlo son las mismas Lara sólo cambia que antes lo añadiste en el footer y ahora e la sidebar, miraste que coincida la id con el nombre a href='#' onclick=....

Responder
Unknown

hola gem@, a modo de humor negro, con esto lo he probado todo, y lo hice bien todas las veces, así que al final me desmadré. pero puedo repetirlo más veces y quizás como otra veces lo consiga. no sé qué es. desperation!!

Responder
Gem@

:: Pues no sé que decirte Lara a veces es lo más insignificante es la causa del problema :S

Responder
Unknown

ya lo sé gem@... seguiré probando y en algún momento me pasaré para decirte eureka.

Responder
Peliculas y juegos online

¡Hola, Gema! En http://peliculasdewaltdisney.blogspot.com/ tengo un problema. La sidebar no se ve bien en ningún otro navegador que no sea internet explorer. He escrito al diseñador, pero no he recibido respuesta... te agradecería mucho que me pudieras ayudar.

¿Quizás sea que le falta esto?:

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

Si es así, ¿cómo y dónde debo ponerlo?

Espero que puedas ayudarme.
¡Muchas gracias!
Hada de los Tiempos

Responder
Gem@

:: Hada de los tiempos lo ideal es que descargues esa plantilla desde la misma página de la que tienes ahora a un blog de pruebas y una vez comprobado que la sidebar se ve bien sea cual sea el navegador entonces comparar las dos plantillas, esa es la forma más clara de ver si le falta y dónde ;)

Responder
Peliculas y juegos online

Gracias, Gema, pero el problema está en la propia plantilla, tal y como la diseñó el creador (http://www.raytemplates.com/template-details.aspx?templateid=6) y no sé exactamente qué tengo que cambiar para que se vea bien...

Responder
Gem@

:: El tema de solucionar problemas en una plantilla adaptada a Blogger no siempre es sencillo y requiere tiempo. Hay que mirar todo detenidamente por ejemplo como te decía descargar la plantilla e instalarla a un blog de pruebas, si ese nuevo blog la sidebar está en su sitio entonces el error de no es la plantilla sino alguna modificación algo que se hizo que la ha desplazado, a veces es algún gadget de mayor tamaño otras algún contenido en una entrada. No te aclaro nada simplemente te doy ideas de como intentar solucionarlo.
Lo ideal es comprobar que esa sidebar estaba en su sitio antes y a partir de cuándo ha empezado ese problema partiendo de ahí hay que comprobar cualquier cambio que se hizo. No digo que elimines cosas sino que las copies y las vayas guardando hasta que la sidebar se ubique en su sitio entonces te darás cuenta qué era lo que ocasionaba el problema.
Es un trabajo pesado pero... no veo otra forma de hacerlo.

Responder
Peliculas y juegos online

Gracias, Gema. La verdad es que al final la mejor solución va a ser cambiar de plantilla... ¡¡¡Besitos!!!

Responder
Gem@

:: Hada de los tiempos la mejor no sé pero la más rápida si, recuerda que al cambiar de plantilla pierdes todo lo añadido en ella.

Responder
Gio

Hola Gema, a mi tampoco me funciona en vez de desplegarse se sube hasta el ehader. tampoco me funciona el gadget de seguidores. Creo que es por q tengo jquery y scriptaculous. Me gustaria poder eliminar jquery para poder usar este efecto. Agradeceria mucho tu ayuda.

Mi blog es http://neutralproxy.blogspot.com/

Gracias y saludos

Responder
Gem@

:: Gio esas librerías sin incompatibles pero antes de eliminar nada yo lo intentaría en un blog de pruebas.
Hace unas semanas JMiur de Vagabundia ofrecía una opción para hacer funcionar el gadget de seguidores. http://vagabundia.blogspot.com/

Responder
Unknown

Hola Gema.

A ver como te explico las novedades ahora.

Resulta que ayer me puse a colocar el efecto toggle en las etiquetas de mi foro. Lo conseguí poner y funcionaba correctamente (esa historia). Pero al meter el primer script deja de funcionar el efecto Dock del menú que tengo puesto debajo del título con los linos al fcebook, twitter, Feed de entradas etc.

No sé por qué me pasa eso. ¿tienes idea de por qué me pasa?

Probé a poner el código del efecto sin meter el script (por si ya lo tenía) pero entonces esconde las etiquetas pero no las despliega.

aquí te dejo la URL del blog

Responder
Gem@

:: Puede ser que estés usando jQuery en el efecto Dock ??
Si fuera así el problema viene porque con este efecto toggle se utiliza Scriptaculous y pueden crear conflictos entre sí.
Para saberlo habría que dejar solamente los scripts utilizados en esta entrada, si funciona sin problemas entonces ya sabemos que hay conflictos y tendrías que optar por una librería ya sea jQuery o Scriptaculous de forma que los efectos fueran creados con la misma librería.

Responder
Jose

Hola Gem@.
De nuevo estoy haciendo otro blog para el cole. Necesito de tu consejo y ayuda. Verás, en la sidebar he puesto un blogroll con capturas de todos los blogs del centro, pero ocupa mucho. He pensado en el efecto toggle de Scriptaculous, pero como tengo Jquery, no funciona. He visto que hay una posibilidad de compatibilizar las dos librerías, y también he visto en vagabundia un toggle con jquery, pero la verdad es que no me aclaro mucho con ninguna de las dos. (el que es torpe...)
Si pudieras echarme un cable...
o bueno, también puede que se te ocurra algo mejor para lo que quiero. Lo que sea, será bienvenido.
Besos

Responder
Gem@

:: Hola Jose, yo parto de la idea que es mejor utilizar la misma librería para todo, lo poco que uso jQuey es para ejemplos miraré ese efecto y te comento algo :)

Responder
Jose

Gracias Gem@ por tu rápida respuesta. Yo pienso como tú; preferiría usar el efecto toggle con jquery, pero no acabo de comprender dónde se colocan los códigos que nos presenta Vagabundia.
Por otro lado, en el enlace que pones al blog de Iván, está este otro código que parece ser que evita el conflicto entre las dos librerías, pero no sé cómo ni dónde se coloca. Ese código es:
script type='text/javascript'>
$(document).ready(function(){
//hide the all of the element with class desplegable
jQuery.noConflict();
jQuery(".desplegable").hide();
//toggle the componenet with class desplegable
jQuery(".desplegador").click(function(){
jQuery(this).next(".desplegable").slideToggle(600);
});
});
</script
(Al script le he quitado los símbolos para poder publicarlo).
Bueno, espero tu sabio consejo. Besitos

Responder
Gem@

:: Hola Jose no creas que me he olvidado es que Blogger hizo una parada que ha durado dos días y no he podido acceder para hasta ahora. Lo tengo en cuenta :)

Responder
CEIP V. Blasco Ibáñez

Gracias, Gem@. Ese parón nos pilló a todos. He estado dándole vueltas a mi tema, y lo más fácil no se me había ocurrido. Voy a usar el script que mencionas de Iván, el de JQuery y simplemente quito eltítulo al gadget y cambio el enlace de texto por una imagen. :D
Espero que quede bien. Ya te digo algo. Besos
PD: Verás que sale otro autor, pero es que estoy currando en el blog del cole y por no entrar y salir...
Pero vamos, que soy Jose.

Responder
CEIP V. Blasco Ibáñez

Edito:
Pues eso, Gem@, que a veces tenemos lo más fácil cerca, y no caemos en la cuenta. Asunto solucionado. Ya tengo mi desplegable con JQuery.
Besitos

Responder
Gem@

:: Lamento no haberte ayudado Jose, pero al parón se unió que me fui el fin de semana a ver a nuestra amiga común :) recién llegué y me dispuse a responder comentarios y veo el tuyo pero me alegra lo tengas resuelto.
Me encanta ese menú desde el primer día que lo vi.
Ese blog te está quedando muy profesional :)

Responder
CEIP V. Blasco Ibáñez

No te preocupes, Gem@. Está bien eso de pensar y pensar hasta que das con la solución. No hace mucho visité a nuestra amiga común. No sabía que estaba por allí, la hacía en otras tierras :)
¿Has visto entonces el blog del cole? Oficial es el adjetivo que más le pega :D
A mí me gustan más coloridos y desenfadados, pero...
Un besazo

Responder
Gem@

:: Hola Jose, entiendo que no es lo mismo un blog para que participen escolares que el blog oficial del centro aún así se puede añadir imagen de fondo a body y respetar para el contenido un color uniforme eso le daría colorido respetando la austeridad que requiere son ideas que se pueden ir probando auqnue al final nos decantamos por la primera idea :)

Responder
Miguel Ángel

Hola Gema, llevo horas con lo que creí que me iba a costar un "rato" :$ (ah, soy MAI, estoy haciendo pinitos en el blog de un amigo :) - el caso es que quería contraer la lista de blogs, en mi blog "nuevo" contraí los archivos y genial, pero con la lista de blogs aquí no hay manera y eso que en el otro también uso varios script antes del /head, el caso es que no encuentro el "data:content" final, no se qué pasa que no consigo colocar bien el ultimo div, lo pongo por todos lados desde el principio del código hasta antes del quickedit y nada, o no puedo cerrar plantilla o directamente sale como está ahora... si tienes un rato puedes echarle un vistazo o decirme si para la lista de blogs tengo que hacer o buscar algo en especial, por favor? sabes que no te molestaría si no me diese por rendida...
he probado el truco que tengo en la lu.... siguiendo la entrada de jmiur que usé para hacerlo pero me lio y me lio... uf.
Este método tendría que ser más sencillo y nada.
Gracias y besazo :D

Responder
Miguel Ángel

Contraje, porras, no contraí, contraje y convestido jajajajja ayyyyy

Responder
Gem@

:: contraí contraje, con smoking y chaqué es lo mismo el caso que lo llevas en la sangre y aunque no tengas intención siempre terminas metiéndote en camisas de once varas :D
Imagino que habrás buscado "data:content" marcando antes para expandir la plantilla así que lo siguiente es comprobar que está en el sitio indicado y lo que yo haría sería copiar esa parte que tienes en tu plantilla que dices que funciona y probar a sustituir la que estás trabajando por la que funciona (siempre en una plantilla de pruebas y más si ese blog es de otra persona)
Sé que es una burrada la solución pero funciona, recuerda que es la parte desde <b:widget id='HTML1' locked='false' title='Directorios' type='HTML'> al final </b:widget>

Responder
Miguel Ángel

Vaya lío de cuentas! uso todas menos la mia y me pongo camisas y lo que se tercie con tal de no aburrirme jajajja
Las burradas suelen funcionar, ya te contaré! gracias, y besazo!

Responder
Gem@

:: Tu tienes muchas cuentas y yo mucho retraso en responder jajajaja Suerte!!

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top